<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>弹出面板</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
</head>

<body>
    <div id="pageBody" class="scrollbar-hover">
        <div class="container">
            <div id="pageContent">
                <style>
                    .example-popover-static .popover {
                        position: relative;
                        display: block;
                        float: left;
                        width: 260px;
                        margin: 20px;
                        z-index: 0;
                    }
                </style>
                <section>
                    <header>
                        <h3>静态类型</h3>
                    </header>
                    <article>
                        <div class="example example-popover-static clearfix">
                            <div class="popover top">
                                <div class="arrow"></div>
                                <h3 class="popover-title">从上方弹出</h3>
                                <div class="popover-content">
                                    <h4>江雪
                                        <small>唐·柳宗元</small>
                                    </h4>
                                    <p>千山鸟飞绝，万径人踪灭。</p>
                                    <p>孤舟蓑笠翁，独钓寒江雪。</p>
                                </div>
                            </div>
                            <div class="popover right">
                                <div class="arrow"></div>
                                <h3 class="popover-title">从右侧弹出</h3>
                                <div class="popover-content">
                                    <h4>江雪
                                        <small>唐·柳宗元</small>
                                    </h4>
                                    <p>千山鸟飞绝，万径人踪灭。</p>
                                    <p>孤舟蓑笠翁，独钓寒江雪。</p>
                                </div>
                            </div>
                            <div class="popover bottom">
                                <div class="arrow"></div>
                                <h3 class="popover-title">从下方弹出</h3>
                                <div class="popover-content">
                                    <h4>江雪
                                        <small>唐·柳宗元</small>
                                    </h4>
                                    <p>千山鸟飞绝，万径人踪灭。</p>
                                    <p>孤舟蓑笠翁，独钓寒江雪。</p>
                                </div>
                            </div>
                            <div class="popover left">
                                <div class="arrow"></div>
                                <h3 class="popover-title">从左侧弹出</h3>
                                <div class="popover-content">
                                    <h4>江雪
                                        <small>唐·柳宗元</small>
                                    </h4>
                                    <p>千山鸟飞绝，万径人踪灭。</p>
                                    <p>孤舟蓑笠翁，独钓寒江雪。</p>
                                </div>
                            </div>
                            <div class="popover left">
                                <h3 class="popover-title">不带箭头</h3>
                                <div class="popover-content">
                                    <h4>江雪
                                        <small>唐·柳宗元</small>
                                    </h4>
                                    <p>千山鸟飞绝，万径人踪灭。</p>
                                    <p>孤舟蓑笠翁，独钓寒江雪。</p>
                                </div>
                            </div>
                        </div>
                    </article>
                </section>
                <section>
                    <header>
                        <h3>动态演示</h3>
                    </header>
                    <article>
                        <div class="example">
                            <button class="btn btn-danger" data-toggle="popover" title="" data-content="千山鸟飞绝，万径人踪灭。" data-original-title="江雪">显示/隐藏弹出面板</button>
                        </div>
                    </article>
                </section>
                <section>
                    <header>
                        <h3>弹出方向</h3>
                    </header>
                    <article>
                        <div class="example text-center">
                            <button type="button" class="btn" data-toggle="popover" data-placement="left" data-content="千山鸟飞绝，万径人踪灭。" title="" data-original-title="江雪">从左侧弹出</button>
                            <button type="button" class="btn" data-toggle="popover" data-placement="top" data-content="千山鸟飞绝，万径人踪灭。" title="" data-original-title="江雪">从上方弹出</button>
                            <button type="button" class="btn" data-toggle="popover" data-placement="bottom" data-content="千山鸟飞绝，万径人踪灭。" title="" data-original-title="江雪">从下方弹出</button>
                            <button type="button" class="btn" data-toggle="popover" data-placement="right" data-content="千山鸟飞绝，万径人踪灭。" title="" data-original-title="江雪">从右侧弹出</button>
                        </div>
                    </article>
                </section>
                <section>
                    <header>
                        <h3>外观</h3>
                    </header>
                    <article>
                        <div class="example text-center">
                            <button type="button" class="btn btn-primary" data-toggle="popover" data-tip-class="popover-primary" data-content="千山鸟飞绝，万径人踪灭。"
                                title="" data-placement="left" data-original-title="江雪">.popover-primary</button>
                            <button type="button" class="btn btn-success" data-toggle="popover" data-tip-class="popover-success" data-content="千山鸟飞绝，万径人踪灭。"
                                title="" data-placement="top" data-original-title="江雪">.popover-success</button>
                            <button type="button" class="btn btn-info" data-toggle="popover" data-tip-class="popover-info" data-content="千山鸟飞绝，万径人踪灭。"
                                title="" data-placement="bottom" data-original-title="江雪">.popover-info</button>
                            <button type="button" class="btn btn-warning" data-toggle="popover" data-tip-class="popover-warning" data-content="千山鸟飞绝，万径人踪灭。"
                                title="" data-placement="top" data-original-title="江雪">.popover-warning</button>
                            <button type="button" class="btn btn-danger" data-toggle="popover" data-tip-class="popover-danger" data-content="千山鸟飞绝，万径人踪灭。"
                                title="" data-placement="right" data-original-title="江雪">.popover-danger</button>
                        </div>
                    </article>
                </section>
            </div>
            <nav></nav>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
    <script>
        $('#pageBody [data-toggle="popover"]').popover();
    </script>
</body>

</html>